<template>
  <select data-placeholder="选择所在河道" id="bean-riverCourseCode" name="riverCourseCode" class="form-control"
          aria-describedby="bean-riverCourseCode-error" maxlength="50" aria-invalid="true" @change="getLevel" required>
    <option value="">--请选择所在河道--</option>
    <option :level="river.level" :value="river.id" :selected="selectedCode === river.id" v-for="river in rivers">{{river.name}}</option>
  </select>
</template>

<script>
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import {$storage, site} from '@/assets/js/boss'

  export default {
    name: 'riverSelect',
    props: {
      selectedCode: {
        type: String,
        default: function () {
        }
      }
    },
    data: function () {
      return {
        rivers: []
      }
    },
    mounted: function () {
      let that = this;
      that.info()
    },
    methods: {
      info() {
        let that = window.$vueApp = this;
        let areaIds = JSON.parse($storage.getItem('staff')).areaId ? JSON.parse($storage.getItem('staff')).areaId : '';
        console.log('用户行政区划：', areaIds)
        axios.get(`${site.riverInfo.list}?areaIds=${areaIds}`).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.rivers = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      getLevel() {
        let that = window.$vueApp = this;
        that.$emit('getLevel', $('#bean-riverCourseCode option:selected').attr('level'))
      }
    }
  }
</script>

<style scoped>

</style>
